<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ taglib uri="http://www.atg.com/taglibs/daf/dspjspTaglib1_0" prefix="dsp" %>
<dsp:page>
	<dsp:importbean bean="/atg/dynamo/droplet/ForEach" />
	<dsp:importbean bean="/atg/commerce/order/ShoppingCartModifier"/>
	<dsp:importbean bean="/atg/commerce/payment/CreditCardTools" />
	<dsp:importbean bean="/atg/dynamo/droplet/ErrorMessageForEach" />
	<dsp:importbean bean="/atg/userprofiling/Profile"/>
<head>

  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@include file="style.jspf" %>
<title>demo</title>
</head>	
	<body>

<script type="text/javascript">
	
	function radio_click(obj){
		var val = obj.value;
		if (val == "SavedCredit") {
    	for(j=0;j<document.chkPaymentInfoForm.elements.length;j++){
	      if(document.chkPaymentInfoForm.elements[j].type=="text" || 
	           document.chkPaymentInfoForm.elements[j].type=="select"|| 
	           document.chkPaymentInfoForm.elements[j].type=="textarea"){
	        document.chkPaymentInfoForm.elements[j].readOnly=true;
	        //document.chkPaymentInfoForm.elements[j].style.color="#FF0000";
	        document.chkPaymentInfoForm.elements[j].style.background="#E0E0E0";
	      }
    	}
		}
		else{
    	for(j=0;j<document.chkPaymentInfoForm.elements.length;j++){
	      if(document.chkPaymentInfoForm.elements[j].type=="text" || 
	           document.chkPaymentInfoForm.elements[j].type=="select"|| 
	           document.chkPaymentInfoForm.elements[j].type=="textarea"){
	        document.chkPaymentInfoForm.elements[j].readOnly=false;
	        //document.chkPaymentInfoForm.elements[j].style.color="#000000";
	        document.chkPaymentInfoForm.elements[j].style.background="#FFFFFF";
	      }
    	}
		}
	}
</script>

<!--
4580601022345677
-->
<dsp:getvalueof var="sfirstName" bean="Profile.billingAddress.firstName"/>
<dsp:getvalueof var="slastName" bean="Profile.billingAddress.lastName"/>
<dsp:getvalueof var="saddress1" bean="Profile.billingAddress.address1"/>
<dsp:getvalueof var="saddress2" bean="Profile.billingAddress.address2"/>
<dsp:getvalueof var="scity" bean="Profile.billingAddress.city"/>
<dsp:getvalueof var="sstate" bean="Profile.billingAddress.state"/>
<dsp:getvalueof var="scountry" bean="Profile.billingAddress.country"/>
<dsp:getvalueof var="spostalCode" bean="Profile.billingAddress.postalCode"/>
<dsp:getvalueof var="sCreditCardType" bean="Profile.defaultCreditCard.creditCardType"/>
<dsp:getvalueof var="screditCardNumber" bean="Profile.defaultCreditCard.creditCardNumber"/>
<dsp:getvalueof var="sexpirationMonth" bean="Profile.defaultCreditCard.expirationMonth"/>
<dsp:getvalueof var="sexpirationDayOfMonth" bean="Profile.defaultCreditCard.expirationDayOfMonth"/>
<dsp:getvalueof var="sexpirationYear" bean="Profile.defaultCreditCard.expirationYear"/>
<dsp:getvalueof var="scardVerificationNumber" value=""/>


	
		<div id="wrap" class="clear-block">
			<div class="checkout">
                <h3>Checkout - <span class="name">Payment Info</span></h3>
								 <dsp:droplet name="ErrorMessageForEach">
								   <dsp:param bean="ShoppingCartModifier.formExceptions" name="exceptions" />
								   <dsp:param name="propertyNameTable" value="firstName=11111" />
								   <dsp:oparam name="output">
								        <div class="error">
								          <dsp:valueof param="message"/>
								        </div>
								   </dsp:oparam>
								 </dsp:droplet>
                <dsp:form name="chkPaymentInfoForm" method="post" action="chkReview.jsp">
                <div class="errorBox">Please fill all required fields if want to use another credit card</div>
                <div class="shippingBox">
                	<p class="addressInfo"><input type="radio" name="radio" onclick="radio_click(this)" id="" value="SavedCredit" checked="checked" class="radio" />Saved Credit card: <dsp:valueof value="${sfirstName}"/> <dsp:valueof value="${slastName}"/>, <dsp:valueof value="${sCreditCardType}"/> <dsp:valueof value="${screditCardNumber}"/></p>
                    <p class="addressInfo"><input type="radio" name="radio" onclick="radio_click(this)" id="" value="OtherCredit" class="radio" />Use another credit card</p>
												<dsp:getvalueof var="slogin" bean="Profile.login"/>
                      	<dsp:input type="hidden" bean="ShoppingCartModifier.shippingGroup.emailAddress" iclass="textInput" id="sgEmail" value='${slogin}'/>
													
													
                    <table>
                        <tbody>
                            <tr>
                                <td width="130">First Name *</td>
                                <td>
                                 <dsp:input name="firstName" readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.billingAddress.firstName" iclass="textInput" id="pgFirstname" value="${sfirstName}"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Last Name *</td>
                                <td>
                                 <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.billingAddress.lastName" iclass="textInput" id="pgLastname" value="${slastName}"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Address Line 1 *</td>
                                <td>
                                 <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.billingAddress.address1" iclass="textInput" id="pgAddress1" value="${saddress1}"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Address Line 2</td>
                                <td>
                                 <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.billingAddress.address2" iclass="textInput" id="pgAdress2" value="${saddress2}"/>
                                </td>
                            </tr>
                            <tr>
                                <td>City *</td>
                                <td>
                                 <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.billingAddress.city" iclass="textInput" id="pgCity" value="${scity}"/>
                                </td>
                            </tr>
                            <tr>
                                <td>State *</td>
                                <td>
                                 <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.billingAddress.state" iclass="textInput" id="pgState" value="${sstate}"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Country *</td>
                                <td>
                                 <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.billingAddress.country" iclass="textInput" id="pgCountry" value="${scountry}"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Postal Code *</td>
                                <td>
                                 <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.billingAddress.postalCode" iclass="textInput" id="pgCode" value="${spostalCode}"/>
                                </td>
                            </tr>
                            <tr>
                              <td>Credit Card Type</td>
                              <td>
                              	
																	<c:choose>
																		<c:when test="${sCreditCardType eq 'visa'}">
                                 			<dsp:getvalueof var="visa" value="true"/>
																		</c:when>
																	</c:choose>	

                               <dsp:select style="background-color:#E0E0E0" type="select" bean="ShoppingCartModifier.paymentGroup.CreditCardType" id="pgCardType">
                                  <dsp:droplet name="/atg/dynamo/droplet/ForEach">
                                    <dsp:param name="array" bean="CreditCardTools.cardTypesMap"/>
                                    <dsp:param name="elementName" value="creditCard" />
																		<dsp:oparam name="output">
																			<dsp:option paramvalue="key" selected="${visa}">
																			  <dsp:valueof param="creditCard"/>
																			</dsp:option>
																		</dsp:oparam>
                                  </dsp:droplet>
                               </dsp:select>
                              </td>
                            </tr>
                            <tr>
                                <td>Credit Card Number *</td>
                                <td>
                                   <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.creditCardNumber" iclass="textInput" id="pgCardNumber"  value="4580601022345677"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Expiration Date *</td>
                                <td>
                                 <dsp:select style="background-color:#E0E0E0" type="select" bean="ShoppingCartModifier.paymentGroup.expirationMonth" id="month" iclass="select month">
                                    <dsp:option value="">Select</dsp:option>
																		<c:forEach var="month" begin="1" end="12">
																			<c:choose>
																				<c:when test="${sexpirationMonth eq month}">
                                    		<dsp:option value="${month}" selected="true"><c:out value="${month}" /></dsp:option>
	                                    	</c:when>
	                                    	<c:otherwise>
	                                    		<dsp:option value="${month}" selected="false"><c:out value="${month}" /></dsp:option>
	                                    	</c:otherwise>		
                                    	</c:choose>
																		</c:forEach>					
                                </dsp:select>
                                

                                <dsp:select style="background-color:#E0E0E0" type="select" bean="ShoppingCartModifier.paymentGroup.expirationDayOfMonth" id="day" iclass="select day">
																		<dsp:getvalueof var="selectValue" param="key" />
                                    <dsp:option value="">Select</dsp:option>
																		<c:forEach var="day" begin="1" end="31">
																			<c:choose>
																				<c:when test="${sexpirationDayOfMonth eq day}">
                                    		<dsp:option value="${day}" selected="true"><c:out value="${day}" /></dsp:option>
	                                    	</c:when>
	                                    	<c:otherwise>
	                                    		<dsp:option value="${day}" selected="false"><c:out value="${day}" /></dsp:option>
	                                    	</c:otherwise>		
                                    	</c:choose>
																		</c:forEach>					
                                </dsp:select>
                                
                                <dsp:select style="background-color:#E0E0E0" type="select" bean="ShoppingCartModifier.paymentGroup.expirationYear" id="year">
                                  <dsp:option value="">Select</dsp:option>
																		<c:forEach var="year" begin="2000" end="2020">
																			<c:choose>
																				<c:when test="${sexpirationYear eq year}">
                                    		<dsp:option value="${year}" selected="true"><c:out value="${year}" /></dsp:option>
	                                    	</c:when>
	                                    	<c:otherwise>
	                                    		<dsp:option value="${year}" selected="false"><c:out value="${year}" /></dsp:option>
	                                    	</c:otherwise>		
                                    	</c:choose>
																		</c:forEach>					
                                </dsp:select>
                                </td>
                            </tr>
                            <tr>
                                <td>Security Code*</td>
                                <td>
                                  <dsp:input readonly="true" style= "background-color:#E0E0E0" type="text" bean="ShoppingCartModifier.paymentGroup.cardVerificationNumber" iclass="textInput"  id="pgSecurityCode" value="${scardVerificationNumber}"/>
                                </td>
                            </tr>
                        </tbody>
                    </table>
 
               </div>
                
              <div class="btnBox">
              	<a href="shoppingCart.jsp" class="btn"><span>Cancel</span></a>
                <dsp:input bean="ShoppingCartModifier.moveToConfirmationSuccessURL" type="hidden" value="chkReview.jsp"></dsp:input>
                <dsp:input bean="ShoppingCartModifier.moveToConfirmationErrorURL" type="hidden" value="chkPaymentInfo.jsp"></dsp:input>
                <dsp:input type="submit" bean="ShoppingCartModifier.moveToConfirmation" value="Next Step" priority="-20" iclass="btn"/>
              </div>
              </dsp:form>
  
            </div>
		</div>
	</body>
	</dsp:page>
</html>